<template>
  <div class="box" v-if="item">
    <van-swipe :autoplay="3000" v-if="item.bastBanner">
      <van-swipe-item
        v-for="(image, index) in item.bastBanner"
        :key="index"
        class="banner"
      >
        <van-image :src="image.img" />
      </van-swipe-item>
    </van-swipe>

    <van-swipe :autoplay="3000" v-if="item.banner">
      <van-swipe-item
        v-for="(image, index) in item.banner"
        :key="index"
        class="banner"
      >
        <van-image :src="image.img" />
      </van-swipe-item>
    </van-swipe>

    <slot></slot>

    <ul class="bastgood" v-if="item.bastList">
      <li v-for="i in item.bastList" :key="i.id">
        <div class="content">
          <!--大盒子 -->
          <router-link :to="`/detail/${i.id}`">
            <van-image class="img" fit="contain" :src="i.image" alt="" />
          </router-link>
          <div class="right">
            <p class="text">{{ i.store_name }}</p>
            <p class="num">￥{{ i.price }}</p>
            <div class="vip">
              <span class="price">￥{{ i.vip_price }}</span>
              <img src="../assets/vip.png" alt="" />
              <span class="number">已售{{ i.sales }}{{ i.unit_name }}</span>
            </div>

            <router-link :to="`/detail/${i.id}`">
              <div class="cart"></div>
            </router-link>
          </div>
        </div>
      </li>
    </ul>

    <ul class="bastgood" v-if="item.list">
      <li v-for="i in item.list" :key="i.id">
        <div class="content">
          <!--大盒子 -->
          <router-link :to="`/detail/${i.id}`">
            <van-image class="img" fit="contain" :src="i.image" alt="" />
          </router-link>
          <div class="right">
            <p class="text">{{ i.store_name }}</p>
            <p class="num">￥{{ i.price }}</p>
            <div class="vip">
              <span class="price">￥{{ i.vip_price }}</span>
              <img src="../assets/vip.png" alt="" />
              <span class="number">已售{{ i.sales }}{{ i.unit_name }}</span>
            </div>

            <router-link :to="`/detail/${i.id}`">
              <div class="cart"></div>
            </router-link>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["item"]
};
</script>

<style scoped lang="less">
.bastgood {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  li {
    width: 100%;
    margin: 10px 0;
    .content {
      display: flex;
      width: 100%;
      height: 100%;
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid rgb(238, 238, 238);
        position: relative;
        .cart {
          position: absolute;
          width: 0.7rem;
          height: 0.7rem;
          right: 0.1rem;
          bottom: 0.1rem;
          margin-right: 0.1rem;
          border: 1px solid tomato;
          border-radius: 50%;
          overflow: hidden;

          a {
            display: inline-block;
            width: 100%;
            height: 100%;
          }

          &::before {
            content: "";
            position: absolute;
            width: 0.4rem;
            height: 0.4rem;
            background: url(../assets/cart.png);
            background-size: 100%;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }
        .text {
          color: #222;
          font-size: 0.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin: 5px 0;
          text-align: left;
        }
        .num {
          text-align: left;
          font-weight: bolder;
          color: #fc4141;
          font-size: 0.5rem;
          margin-top: 1rem;
        }
        .vip {
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          .price {
            color: #282828;
            font-size: 0.5rem;
            margin-right: 0.15rem;
          }
          img {
            width: 0.8rem;
            height: auto;
          }
          .number {
            color: #aaa;
            margin-left: 0.15rem;
            overflow: hidden;
            font-size: 0.4rem;
          }
        }
      }
      .img {
        width: 3rem;
        height: 3rem;
        border-radius: 5px;
        margin-right: 0.3rem;
      }
    }
  }
}

.banner {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  .van-image {
    width: 96%;
    height: 5rem;
  }
}
</style>
